import { useEffect, useRef } from 'react'
import THREEProject from '../utils/index'


const AmmoDemo = () => {
  const can = useRef(null)
  const pro = new THREEProject()
  const { thr, renderer, scene, axes, camera, controls } = pro

  const init = async () => {
    scene.add(axes)
    const material = new thr.SpriteMaterial({
      color: 0x007777,
      opacity: 0.7,
      transparent: true
    })
    for(let i = 0; i < 20; i++) {
      for(let j = 0; j < 20; j++) {
        for(let k = 0; k < 20; k++) {
          const sprite = new thr.Sprite(material)
          sprite.position.x = i
          sprite.position.y = j
          sprite.position.z = k
          scene.add(sprite)
        }
      }
    }
    // const sprite = new thr.Sprite(material)
    // scene.add(sprite)
    appendRenderDom()
    animate()
  }
  const appendRenderDom = () => {
    if(!can.current.children.length) {
      can.current.appendChild(renderer.domElement)
    }
  }

  const render = () => {
    controls.update()
    renderer.render(scene, camera)
  }

  const animate = () => {
    requestAnimationFrame(animate)
    render()
  }

  useEffect(init, [])

  return (
    <div ref={can}></div>
  )
}

export default AmmoDemo
export {
  AmmoDemo
}